<template>
  <div class="list-page">
    <tool-bar nav="" title="数据模型">
      <el-button @click="add_click()">添加</el-button>

      <template #append>
        <div style="margin-left: 12px;" v-if="$data.pid">模型路径:</div>
      </template>
    </tool-bar>
    <my-list
        ref="list"
        url="/dev/data-model/list"
        @param="preload"
        @loaded="procData"
        :page-size="10"
        :store="true"
        :query="$data.query"
    >
      <el-table-column align="center" label="产品线" width="160px">
        <template #header>
          <el-button @click="$data.edit_productLine=true" v-if="!$data.edit_productLine">编辑产品线
          </el-button>
          <template v-else>
            <el-button @click="save_productLine">保存</el-button>
            <el-button @click="$data.edit_productLine=false">取消</el-button>
          </template>
        </template>
        <template v-slot="scope">
          <el-input v-model="scope.row.productLine.code" placeholder="编码或名称"
                    v-if="$data.edit_productLine">{{
              scope.row.productLine.code
            }}
          </el-input>
          <div v-else>{{ scope.row.productLine.name }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="应用" prop="app" width="160px">
        <template #header>
          <el-button @click="$data.edit_app=true" v-if="!$data.edit_app">编辑应用</el-button>
          <template v-else>
            <el-button @click="save_app">保存</el-button>
            <el-button @click="$data.edit_app=false">取消</el-button>
          </template>
        </template>
        <template v-slot="scope">
          <el-input v-model="scope.row.app" v-if="$data.edit_app">{{
              scope.row.app
            }}
          </el-input>
          <div v-else>{{ scope.row.app }}</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="父路径">
        <template v-slot="scope">
          <div class="link" v-for="item in scope.row.parents" :key="item.id"
               @click="edit_click(scope.row, item.id)">{{ item.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="名称" width="280" align="left">
        <template v-slot="scope">
          <div class="link" @click="edit_click(scope.row)">{{ scope.row.name }}</div>
        </template>
      </el-table-column>

      <el-table-column align="center" label="子" width="80">
        <template v-slot="scope">
          <el-tag>{{ scope.row.items.length }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="总" width="80">
        <template v-slot="scope">
          <el-tag>{{ getItemsCount(scope.row.define) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="对象" width="80">
        <template v-slot="scope">
          <el-tag>{{ getItemsCount(scope.row.define, "Object") }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="数组" width="80">
        <template v-slot="scope">
          <el-tag>{{ getItemsCount(scope.row.define, null, true) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="80">
        <template v-slot="scope">
          <el-button type="warning" plain round @click="delete_click(scope.row)" size="small">
            删除
          </el-button>
        </template>
      </el-table-column>
      <template #query="scope">
        <kv label="产品线">
          <product-line clearable v-model="scope.query.productLine"></product-line>
        </kv>
        <kv label="关键字">
          <el-input v-model="scope.query.text"></el-input>
        </kv>


        <kv label="属性数量">
          <number-range v-model="scope.query.count"></number-range>
        </kv>
        <kv label="包含">
          <selector multi v-model="scope.query.contains"
                    :data="{'object':'对象','list':'数组'}"></selector>
        </kv>

      </template>
    </my-list>
  </div>
</template>

<script setup>
/**
 * Created by CodeGenerator at 2023-11-05 12:25:35
 */

import productLine from "@/component/product-line.vue";





//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({
  more: false,
  pid: "",
  edit_app: false,
  edit_productLine: false,
  //默认查询条件,默认存储
  query: {productLine: "", contains: [], count: []},
  ApiParameterTypeEnum: jv.enum.ApiParameterTypeEnum.getData(),
  ApiParameterStringTypeEnum: jv.enum.ApiParameterStringTypeEnum.getData(),
  ApiJsonLocationEnum: jv.enum.ApiJsonLocationEnum.getData(),
});


const $props = defineProps({});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);

const save_app = function () {
  var data = list.value.getData().data.map(it => {
    return {id: it.id, app: it.app}
  });
  jv.$http.post("/dev/data-model/save-app", data).then(res => {
    jv.info("保存成功")
    $data.edit_app = false;
  })
};
const save_productLine = function () {
  var data = list.value.getData().data.map(it => {
    return {id: it.id, productLine: it.productLine.code}
  });
  jv.$http.post("/dev/data-model/save-product-line", data).then(res => {
    jv.info("保存成功")
    $data.edit_productLine = false;

    loadData()
  })
}


const getItemsCount = function (model, type, isList) {
  if (!model.items?.length) {
    return 0;
  }
  return model.items
      .filter(it => {
        var ret = true;
        if (type) {
          ret = it.type == type;
        }
        if (!ret) {
          return ret;
        }
        if (isList) {
          ret = it.isList == isList;
        }
        return ret;
      }).length + model.items
      .filter(it => it.type == "Object")
      .map(it => getItemsCount(it, type, isList))
      .sum();
};
const preload = function (param) {
//保存查询条件
//添加查询参数，修改分页参数等。
//param.type = jv.$route.params.type
};
const procData = function (res) {
  res.data.data.forEach(it => {
//如果是组合实体，设置 it.id=...
  });
};
const loadData = function (pageNumber) {
  list.value.loadData(pageNumber);
};
const add_click = function () {
  jv.$router.push("/dev/data-model/add")
};
const edit_click = function (row, rowId) {
  //记录上次点击行
  rowId = rowId || row.id;
  list.value.setLastRow(row);
  jv.$router.push("/dev/data-model/edit/" + rowId)
};
const delete_click = async function (row) {
  let rowId = row.id, rowName = row.name;
  await jv.confirm('确认删除 ' + rowName + ' 吗？');
  let res = await jv.$http.post("/dev/data-model/delete/" + rowId)
  loadData();
};

onMounted(function () {
//加载存储的查询条件
  $data.pid = jv.$route.query.pid || "";
})


</script>

<style scoped lang="scss">
</style>
